<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="studentQuery.name" placeholder="姓名" />
      </el-form-item>

      <el-form-item>
        <el-select v-model="studentQuery.sex" clearable placeholder="性别">
          <el-option value="M" label="男" />
          <el-option value="F" label="女" />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="90">
        <template v-slot="scope">
          {{ scope.row.stuId }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <template v-slot="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年龄" width="120">
        <template v-slot="scope">
          {{ scope.row.age }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别" width="120" :formatter="sexFormatter" />
      <el-table-column align="center" label="生日" width="200">
        <template v-slot="scope">
          <span>{{ scope.row.birthDay }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邮箱" width="120">
        <template v-slot="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" width="120">
        <template v-slot="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="专业" width="120" :formatter="majorityFormatter" />

      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <router-link :to="'/student/edit/'+scope.row.stuId">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <span style="margin: 0px 10px 0px 10px" />
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteStudent(scope.row.stuId)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

  </div>
</template>

<script>
import { getList, deleteStudent } from '@/api/student'

export default {

  data() {
    return {
      list: null,
      listLoading: true,
      studentQuery: {},
      page: 1,
      limit: 10,
      total: 0,
      majorityList: [
        { 'key': '1', 'value': '软件工程' },
        { 'key': '2', 'value': '信息安全' },
        { 'key': '3', 'value': '计算机科学' }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    sexFormatter(row) {
      return row.sex === 'M' ? '男' : row.sex === 'F' ? '女' : '未知'
    },
    majorityFormatter(row) {
      const majority = this.majorityList.find(item => item.key === row.majority );
      return majority ? majority.value : row.majority
    },
    fetchData(page = 1) {
      this.page = page
      this.listLoading = true
      getList(this.studentQuery, this.page, this.limit).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    resetData() { // 清空的方法
      // 表单输入项数据清空
      this.studentQuery = {}
      // 查询所有讲师数据
      this.fetchData()
    },
    deleteStudent(id) {
      this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        // 调用删除的方法
        deleteStudent(id)
          .then(response => { // 删除成功
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 回到列表页面
            this.fetchData()
          })
      })
    }

  }
}
</script>
